<template>
  <div>
    <div>
      <el-table v-loading="dataListLoading" :data="data" border class="layout-table">
        <el-table-column type="index" header-align="center" align="center" width="50" />
        <el-table-column prop="deviceTime" label="时间" header-align="center" align="center" />
        <el-table-column prop="address" label="地址" header-align="center" align="center" />
        <el-table-column prop="gotsrc" label="定位类型" header-align="center" align="center" />
        <!--          <el-table-column prop="occurNum" label="停留时长" header-align="center" align="center" />-->
        <!--          <el-table-column prop="executorPhone" label="状态" header-align="center" align="center" />-->
        <el-table-column prop="latitude" label="经度" header-align="center" align="center" />
        <el-table-column prop="longitude" label="维度" header-align="center" align="center" />
        <el-table-column prop="speed" label="速度" header-align="center" align="center">
          <template #default="scope">
            <span>{{ speedConvert(scope.row.speed) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="direction" label="方向" header-align="center" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, watch } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useRoute } from 'vue-router'
import { getDetailsApi } from '@/api/statistics/driving/details'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import RealTimeTrack from '@/components/map-realTime-track/realTimeTrack.vue'
import { useGetTrackPosApi } from '@/api/gps/rule'
import {speedConvert} from "@/utils/gps/format";
const route = useRoute()
const data = ref()
const dataListLoading = ref(true)
// const queryForm = ref({
//   id: route.query.userId
// })

if (route.query.imei) {
  getDetails()
} else {
  dataListLoading.value = false
  // getDetails()
}
function getDetails() {
  console.log(123)
  dataListLoading.value = true
  useGetTrackPosApi(route.query).then((res) => {
      data.value = res.data.positions
      dataListLoading.value = false
  })
  // getDetailsApi(route.query.id).then((res) => {
  //   data.value = res
  //   dataListLoading.value = false
  // })
}
</script>
<style>
.hide {
  width: 200px;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bottom {
  margin: 10px 0;
  width: 100%;
  height: 500px;
  display: flex;
  //flex-wrap: nowrap;
}
</style>
